<%@ page contentType="text/html;charset=UTF-8" %>﻿
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title></title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta content="width=device-width, initial-scale=1" name="viewport"/>
<meta content="" name="description"/>
<meta content="" name="author"/>

<link rel="stylesheet" type="text/css" href="${ctx}/static/js/themes/default/easyui.css" />
<link rel="stylesheet" type="text/css" href="${ctx}/static/js/themes/IconExtension.css" />

</head>
<body class="easyui-layout layout" style="background: #fff;"> 
<input type="hidden" value="${ctx}" id="context_val">
	<div id="imgShow"
		style="position: absolute; display: none; border: 4px #ccc solid; z-index: 10; background-color: #fff; padding: 5px;">
		<img src="" width="150px">
	</div>
	<div region="north" border="false" title="区域搜索" collapsed="false"
		style="height: 80px; overflow: hidden; background: #eee; border-bottom: 1px solid #ddd"
		align="left">
		<form id="searchForm">
			<table style="height: 100%; width: auto;">
				<tr>
					<td>区域：</td>
					<td><input class="easyui-textbox" type="text"
						name="areaName" id="areaName"></input></td>
					<td>描述：</td>
					<td><input class="easyui-textbox" type="text"
						name="remark" id="remark"></input></td>
					<td align="center"><a href="javascript:void(0);"
						class="easyui-linkbutton" iconCls="icon-search"
						onclick="select();">查询</a></td>
				</tr>
			</table>
		</form>

	</div>
	<div region="center" border="false">
		<table id="test"></table>
	</div>
	<div id="mm" class="easyui-menu" style="width:120px;">
		<div onclick="append()">Append</div>
		<div onclick="remove()">Remove</div>
	</div>

<script type="text/javascript" src="${ctx}/static/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="${ctx}/static/js/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${ctx}/static/common/dateFormat.js"></script>
<script type="text/javascript" src="${ctx}/static/js/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript">
$(function(){
	select();
});
var select = function(){
	var queryParams = getSelectCondition();
	$('#test').treegrid({
		title:'区域列表',
		iconCls:'icon-map',
		fit:true,
		nowrap: false,
		rownumbers: true,
		animate:true,
		showFooter: true,
		collapsible:true,
		url:'${ctx}/area/selectArea',
		queryParams: queryParams,
		idField:'id',
		treeField:'areaName',
		toolbar : [{
			text : '刷新/清除选择',
			iconCls : 'icon-2012080412111',
			handler : refresh
			}, '-', {
				text : '添加',
				iconCls : 'icon-add',
				handler : append
			}, '-', {
				text : '修改',
				iconCls : 'icon-edit',
				handler :function(){
					edit();
				}
			}, '-', {
				text : '保存',
				iconCls : 'icon-disk',
				handler :function(){
					save();
				}
			}, '-', {
				text : '删除',
				iconCls : 'icon-Empty',
				handler :function(){
					del();
				}
			}],
		columns:[[
		    {field:'areaName',title:'区域名称',width:200,editor:'text'},
			{field:'remark',title:'备注',width:150,editor:'text'},
			{field:'crtDate',title:'创建时间',width:220,formatter:
				function(value){
				if(value=="" || value == null)return"";
            	return new Date(value).format("yyyy-MM-dd hh:mm:ss");
            }},
			{field:'displayCrtOpr',title:'创建人',width:150},
			{field:'lstEdtDate',title:'最后修改时间',width:150,formatter:
				function(value){
				if(value=="" || value == null)return"";
            	return new Date(value).format("yyyy-MM-dd hh:mm:ss");
            }},
			{field:'displayLstEdtOpr',title:'最后修改人',width:150}
		]]
	});
}
var isAdd = false;
var isEdit = false;
var append = function(){
	var data = [{
		id: -999,
		areaName: '',
		remark: '',
		crtOpr: '',
		crtDate: '',
		lstEdtOpr: '',
		lstEdtDate: '',
		iconCls:"icon-map"
	}];
	
	var selectData = $('#test').treegrid('getSelected');
	if(selectData){
		$('#test').treegrid('append', {
			parent: selectData.id,
			data: data
		});
	}else{
		$('#test').treegrid('append', {
			data: data
		});
	}
	edit(-999);
	isAdd = true;
	isEdit = false;
}
var refresh = function(){
	select();
}
//获取查询条件参数对象方法，用户reload时获取查询条件
var getSelectCondition = function(){
	var areaName = $("#areaName").val();
	var remark = $("#remark").val();
	return { 
		 'areaName': areaName ,
		 'remark':remark
	}
}
//新增和修改时的校验方法
var valid = function(data){
	if(data.areaName == ""){
		$.messager.show({
			title:'错误',
			msg:'保存失败:区域名称不能为空',
			showType:'show'
		});
		return false;
	}
	
	data.crtDate="";
	data.lstEdtDate="";
	for(var i in data){
		if(data[i] == null){
			data[i] = "";
		}
	}
	return true;
}
//保存方法
function save(){
	//编辑保存
	if (isEdit && nowEditingId != null){
		var t = $('#test');
		t.treegrid('endEdit', nowEditingId);
		var editData = t.treegrid('find', nowEditingId);
		editData.parentId = editData._parentId;
		if(!valid(editData))return;
		$.ajax({
			url: '${ctx}/area/update',
			type: "post",
			data: editData,
			dataType: "json",
			success: function(jsondata, statusText, xhr) {	
				if(jsondata.result == "OK"){
					refresh();
					nowEditingId = null;
					isEdit = false;
					isAdd = false;
					$.messager.show({
						title:'成功',
						msg:'更新成功',
						showType:'show'
					});
			    }else{
					$.messager.show({
						title:'错误',
						msg:'更新数据时发生错误:'+jsondata.meg,
						showType:'show'
					});
			    }
			}
			, error: function(xhr, message, error) {
				$.messager.show({
					title:'错误',
					msg:'更新数据时发生错误:'+message,
					showType:'show'
				});
			}
		});
		return;
	}
	//新增保存
	if (isAdd){
		isEdit = false;
		isAdd = false;
		$('#test').treegrid('endEdit', -999);
		var addData = $('#test').treegrid('find',-999);
		addData.parentId = addData._parentId;
		if(valid(addData)){
			$.ajax({
				url: '${ctx}/area/add',
				type: "post",
				data: addData,
				dataType: "json",
				success: function(jsondata, statusText, xhr) {			
					if(jsondata.result == "OK"){
							refresh();
						   $.messager.show({
								title:'成功',
								msg:'新增成功',
								showType:'show'
							});
					   }else{
						   $.messager.show({
								title:'错误',
								msg:'新增数据时发生错误:'+jsondata.meg,
								showType:'show'
						   });
					   }
				}
				, error: function(xhr, message, error) {
					$.messager.show({
						title:'错误',
						msg:'新增数据时发生错误:'+message,
						showType:'show'
					});
				}
			});
		}
		
	}
}
var nowEditingId = null;
function edit(pointId){
	isEdit = true;
	isAdd = false;
	if(pointId != null){
		$('#test').treegrid('beginEdit',pointId);
		nowEditingId = pointId;
		return;
	}
	var row = $('#test').treegrid('getSelected');
	if (row){
		nowEditingId = row.id;
		$('#test').treegrid('beginEdit', row.id);
	}
}
function del(){
	var row = $('#test').treegrid('getSelected');
	if (row){
		$.messager.confirm('警告！', '确认删除：'+row.areaName+" 及其子节点吗？", function(r){
			if (r){
				$.ajax({url: '${ctx}/area/delete?id='+row.id
				   , type : 'POST'
				   , dataType : 'json'
				   , processData: false
				   , success: function(jsondata, statusText, xhr) {
					   if(jsondata.result == "OK"){
						   $('#test').treegrid('remove', row.id);
						   
						   $.messager.show({
								title:'成功',
								msg:'删除成功',
								showType:'show'
							});
					   }else{
						   $.messager.show({
								title:'错误',
								msg:'删除数据时发生错误:'+jsondata.meg,
								showType:'show'
							});
					   }
					}
				   , error: function(xhr, message, error) {
					   $.messager.show({
							title:'错误',
							msg:'删除数据时发生错误:'+message,
							showType:'show'
						});
					}
				});
				
			}
		});
	}
}
</script>
</body>
</html>